<template>
  <div class="Dictionaries">
    <div class="box">
      <div class="top">
        <i class="el-icon-s-fold"></i>
        <span class="name">字典管理</span>
        <i class="el-icon-refresh-right"></i>
      </div>
      <div class="btm">
        <div class="input">
          <div class="zhuang">
            <div class="title">状态</div>
            <el-select
              v-model="formInline.region"
              placeholder="正常"
              style="width: 80px"
            >
              <el-option label="正常" value="shanghai"></el-option>
              <el-option label="冻结" value="beijing"></el-option>
            </el-select>
          </div>
          <div class="shi">
            <div class="title">字典标识</div>
            <input type="text" placeholder="请输入字典标识" />
          </div>
          <div class="ti">
            <div class="title">字典标题</div>
            <input type="text" placeholder="请输入字典标题" />
          </div>
          <div class="sousuo">
            <i class="el-icon-search"></i>
          </div>
        </div>
        <div class="left">
          <button @click="addfn(1)"><i class="el-icon-plus"></i>添加</button>
          <el-dropdown>
            <el-button type="primary">
              操作<i class="el-icon-caret-bottom"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>启用</el-dropdown-item>
              <el-dropdown-item>冻结</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="table">
      <template>
        <el-table :data="data" style="width: 100%" border>
          <el-table-column width="50px">
            <el-checkbox></el-checkbox>
          </el-table-column>
          <el-table-column prop="biaoshi" label="字典标识" width="150px">
          </el-table-column>
          <el-table-column prop="title" label="字典标题" width="100px">
          </el-table-column>
          <el-table-column prop="key" label="类型" width="70px">
          </el-table-column>
          <el-table-column prop="item" label="字典值"> </el-table-column>
          <el-table-column prop="time" label="创建时间" width="200px">
          </el-table-column>
          <el-table-column prop="newTime" label="更新时间" width="200px">
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <div class="btn"  slot-scope="scope">
              <span @click="fn(scope)">编辑</span>
              <span @click="detaifn(scope)">详情</span>
              <span @click="handleDelete(scope)">删除</span>
            </div>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- 弹框 -->
    <el-dialog
      :title="i == 1 ? '添加字典' : '编辑字典'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" v-model="form.id">
        <el-form-item label="字典标识" :label-width="formLabelWidth">
          <el-input
            v-model="form.biaoshi"
            autocomplete="off"
            placeholder="请输入字典标识"
          ></el-input>
        </el-form-item>
        <el-form-item label="字典标题" :label-width="formLabelWidth">
          <el-input
            v-model="form.title"
            autocomplete="off"
            placeholder="请输入字典标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="form.key" placeholder="键值对">
            <el-option label="键值对" value="键值对"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字典值" :label-width="formLabelWidth">
          <el-input v-model="form.item" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            v-model="form.beizhu"
            autocomplete="off"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fnsure">保存</el-button>
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import instance from "../../api/index";
export default {
  name: "Dictionaries",
  data() {
    return {
      i: 0,
      data: null,
      dialogFormVisible: false,
      formInline: {
        user: "",
        region: "",
      },
      form: {
        id:"",
        biaoshi:"",
        key: "键值对",
        title:"",
        item:"",
        beizhu:""
      },
      formLabelWidth: "100px",
    };
  },
  methods: {
    async getdata() {
      let { data } = await instance.get("/diction");
      this.data = data;
    },
    // 添加
    addfn(i) {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.i = 1;
    },
    // 编辑
    fn(row) {
      console.log(row.row);
      this.form.id = row.row.id;
      this.form.biaoshi=row.row.biaoshi,
      this.form.key= row.row.key,
      this.form.title=row.row.title,
      this.form.item=row.row.item,
      this.form.beizhu=row.row.beizhu
      this.dialogFormVisible = !this.dialogFormVisible;
      this.i = 0;
    },
    // 删除
    handleDelete(index, row) {
      // console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteHomeIndex(index);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击弹窗确定
    async fnsure() {
      this.dialogFormVisible = false;
      // if (this.i == 1) return this.handleAdd();
      if(this.i==1){
          await instance.post("/diction",this.form);
          this.form.biaoshi="",
          this.form.key= "键值对",
          this.form.title="",
          this.form.item="",
          this.form.beizhu=""
          this.getdata();
          this.i=0
      }
      this.editHomeIndex()
    },
    // 添加
    // async handleAdd() {
    //   let { data } = await instance.post("/diction",this.form);
    //   // console.log("105", data);
    //   this.i = 1;
    //   console.log(data);
    //   // this.getdata();
    // },
    // 编辑
    async editHomeIndex() {
      // let name = this.form.username;
      // let text = this.form.usernick;
      let id = this.form.id;
      console.log(id);
      let { data } = await instance.put("/diction/edit/" + id, this.form);
      console.log(data);

      this.getdata();
    },
    // 删除
    async deleteHomeIndex(index) {
      let { data } = await instance.delete("/diction/delete/0" + index.$index);
      console.log(data);
      this.getdata();
    },
  },

  created() {
    this.getdata();
  },
};
</script>

<style scoped>
.table {
  margin: 20px;
}
.table .btn {
  display: flex;
  justify-content: space-around;
}
.table .btn span:hover {
  text-decoration: underline;
  color: #009688;
}
.box {
  margin: 10px;
}
.box .top {
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  background: #fff;
  height: 40px;
  border-bottom: 1px solid #ccc;
}
.box .top .name {
  font-size: 15px;
  padding-left: 5px;
  flex: 1;
}
.box .btm {
  height: 60px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
}
.box .btm .input {
  flex: 1;
  margin-top: 20px;
  display: flex;
}
.box .btm .input > div {
  display: flex;
  margin-right: 5px;
}
.box .btm .input div .title {
  padding: 8px 10px;
  background-color: #fff;
  border-color: #009688;
  color: #009688;
  font-weight: bold;
  border: 1px solid #009688;
}
.box .btm .input div input {
  border-left: none;
  border: 1px solid #009688;
  padding-left: 5px;
}
.box .btm .input .sousuo {
  background: #009688;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
}
.box .btm .left {
  margin: 20px 20px 0 0;
}
.box .btm .left button {
  padding: 10px;
  color: #fff;
  background: #009688;
  border: none;
  margin-left: 10px;
  border-radius: none;
}
</style>